<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bulk Load</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta name="description" content=""/>
		<meta name="author" content=""/>

		<link href="../css/bootstrap.css" rel="stylesheet" />
		<link href="../css/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<link href="../css/main.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/select2/select2.css">
		<link rel="stylesheet" type="text/css" media="screen"
		href="../js/lib/poshytip/tip-darkgray/tip-darkgray.css" />

		<script src="../js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
		<script src="../js/lib/underscore-min.js" type="text/javascript"></script>
		<script src="../js/lib/backbone-min.js" type="text/javascript"></script>
		<script src="../js/lib/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
		<script src="../js/lib/mustache.js" type="text/javascript"></script>
		<script src="../js/lib/bootstrap-dropdown.js" type="text/javascript"></script>
		<!--script src="../js/lib/select2.min.js" type="text/javascript"></script-->
		<script src="../js/lib/select2.js" type="text/javascript"></script>
		<!--script src="../js/lib/poshytip/jquery.poshytip.min.js" type="text/javascript"></script-->
		<script src="../js/lib/poshytip/jquery.poshytip.js" type="text/javascript"></script>
		<script src="../js/lib/jquery.blockUI.js" type="text/javascript"></script>

		<!-- views -->
		<script src="../js/backbone-page.js" type="text/javascript"></script>
		<script src="../js/backbone-form.js" type="text/javascript"></script>
		<script src="../js/backbone-form-jui-ext.js" type="text/javascript"></script>
		<script src="../js/backbone-table.js" type="text/javascript"></script>

		<!-- templates -->
		<script src="../js/templates/page-bootstrap.js" type="text/javascript"></script>
		<script src="../js/templates/form-bootstrap.js" type="text/javascript"></script>
		<script src="../js/templates/table-bootstrap.js" type="text/javascript"></script>

		<!-- page -->
		<script src="../js/page/bulkload.js" type="text/javascript"></script>

		<link rel="stylesheet" href="../css/jquery.fileupload-ui.css">

		<script src="../js/lib/vendor/jquery.ui.widget.js"></script>
		<script src="../js/lib/jquery.iframe-transport.js"></script>
		<script src="../js/lib/jquery.fileupload.js"></script>

		<style>
			td > input[type="text"] {
				width: 80px;
			}

			textarea {
				width: 100px;
			}

			.bar {
				height: 18px;
				background: green;
			}

		</style>
		<!--[if IE 7]>
		<style>
		.alpha{
		margin-top:8px;
		}
		</style>
		<![endif]-->

	</head>
	<body>

		<div id="main_content" style="margin-top:50px;"></div>

		<script>
			var page_readOnly = false;

			$(function() {

				var Content = Backbone.Model.extend({
					schema : bulkload.sections
				});

				var con = new Content();
				var asset = new Backbone.Asset({
					model : con,
					readOnly : page_readOnly
				}).render();

				$("#main_content").append(asset.el);

				$('#fileupload').bind('fileuploadsubmit', function(e, data) {

					var prioVal = $("#selectpriority").val();
					$("#priority").filter(function() {
						return $(this).parent().attr("id") == "fileupload";
					}).val(prioVal);

					var typeVal = $("#selecttype").val();
					$("#type").filter(function() {
						return $(this).parent().attr("id") == "fileupload";
					}).val(typeVal);

					// console.log(data.formData);
				});
				var jqXHR;
				$('#fileupload').fileupload({
					url : "http://localhost:8888", //"../../upload", //"../../rest/fileUpload",//
					//dataType : 'json',
					add : function(e, data) {
						//data.submit();
						jqXHR = data.submit().success(function(result, textStatus, jqXHR) {
							var val = jqXHR.responseText;
							console.log("responseText: " + val);
							console.log("result: " + result);
							// var val = "{\"flag\":\"0\",\"status\":\"SUBMITTED\",\"filename\":\"GSI_APP-20120830-164910.csv\",\"destination\":\"/upload\",\"size\":\"297\"}";
							// var obj = JSON.parse(val);
							var table = asset.getTables().BULKLOAD;
							//table.saveRow(JSON.parse(result));

							result.type = $("#selecttype").val();
							table.saveRow(result);
						}).error(function(jqXHR, textStatus, errorThrown) {
							alert("error");
							if (errorThrown === 'abort') {
								alert('File Upload has been canceled');
							}//btnCancel
						}).complete(function(result, textStatus, jqXHR) {
							console.log("complete");
							//                                                        $('#progress .bar').css('width', '0%');
						});
					},

					progress : function(e, data) {
						var progress = parseInt(data.loaded / data.total * 100, 10);
						$('#progress .bar').css('width', progress + '%');
					},
					done : function(e, data) {
						$.each(data.result, function(index, file) {
							$('<p/>').text(file.name).appendTo(document.body);
						});
						// data.context.text('Upload finished.')

					}
				});

				$('#btnCancel').click(function(e) {
					jqXHR.abort();
				});

				var fileLoadHistory = function() {

					var createby = $("#createby").val();
					var createdate = $("#createdate_input").val();
					var modifydate = $("#modifydate_input").val();
					var priority = $("#priority").val();

					var datastr = "{\"createby\":\"" + createby + "\",\"createdate\":\"" + createdate + "\",\"modifydate\":\"" + modifydate + "\",\"priority\":\"" + priority + "\"}";
					var data = JSON.parse(datastr);

					$.ajax({
						url : "../../loadHistory", //"../../rest/fileUpload/loadHistory",//"../../rest/fileUpload/userHistory",
						type : "POST",
						dataType : "json",
						data : data,
						error : function(xhr, ajaxOptions, thrownError) {
							$.unblockUI();
							alert("error:" + thrownError);
							return false;
						},
						success : function(data) {
							if (data.flag == 0) {
								var val = data.val, table = asset.getTables().BULKLOADHISTORY;
								table.setValue = function(value) {
									if (value && value.length > 0) {
										this.removeAll();
										//this.addFirst();
										var collection = new BTS.SortableList(value);
										this.collection = collection;
										this.collection.forEach(this.add, this);
									}
								};
								if (val) {
									table.setValue(val);
								} else {
									table.setValue([]);
								}

								// if (tables) {
								// var keys = _.keys(tables);
								// _.each(keys, function(key) {
								// var tbl = tables[key];
								// tbl.setValue = function(value) {
								// if (value && value.length > 0) {
								// this.removeAll();
								// //this.addFirst();
								// var collection = new BTS.SortableList(value);
								// this.collection = collection;
								// this.collection.forEach(this.add, this);
								// }
								// };
								// if (val) {
								// tables[key].setValue(val);
								// } else {
								// tables[key].setValue([]);
								// }
								// });
								// }

							} else if (data.flag == 1) {
								alert(data.error.info);
							} else {
								alert("results format error");
							}
							//$.unblockUI();
							// return false;
						}
					});
				};

				$("#btnFHSearch").bind('click', fileLoadHistory);

				// fix sub nav on scroll
				var $win = $(window), $nav = $('.subnav'), navTop = $('.subnav').length && $('.subnav').offset().top - 40, isFixed = 0;

				function processScroll() {
					var i, scrollTop = $win.scrollTop();
					if (scrollTop >= navTop && !isFixed) {
						isFixed = 1;
						$nav.addClass('subnav-fixed');
					} else if (scrollTop <= navTop && isFixed) {
						isFixed = 0;
						$nav.removeClass('subnav-fixed');
					}
				}

				processScroll();

				// hack sad times - holdover until rewrite for 2.1
				$nav.on('click', function() {
					if (!isFixed)
						setTimeout(function() {
							$win.scrollTop($win.scrollTop() - 47);
						}, 10);
				});

				$win.on('scroll', processScroll);

			});

		</script>

	</body>
</html>